<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <%--引入element的js--%>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <%--引入elementui的样式--%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-form :inline="true" :model="staffvo" class="demo-form-inline">
    <el-form-item label="编号">
      <el-input v-model="staffvo.staffId" placeholder="请输入部门编号"></el-input>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="staffvo.staffName" placeholder="部门名称">
        <el-option v-for="d in dep" :key="d.deptId" :label="d.deptName" :value="d.deptName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="shuaxin">刷新</el-button>
    </el-form-item>
  </el-form>
  <el-table
          :data="staffs"
          border
          style="width: 100%">
    <el-table-column
            prop="department.deptId"
            label="编号"
    >
    </el-table-column>
    <el-table-column
            prop="department.deptName"
            label="部门"
    >
    </el-table-column>

    <el-table-column
            prop="amount"
            label="金额">
    </el-table-column>

    <el-table-column
            prop="expenditureDescribe"
            label="资金流向">
    </el-table-column>
    <el-table-column
            prop="expenditureData"
            label="时间">
    </el-table-column>

      </template>
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="100">
      <template slot-scope="scope">
        <el-button @click="deleterole(scope.row)" type="primary" size="small">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</div>
</body>
<script>
  let app=new Vue({
    el: "#app",
    data: {
      //员工表格的数据
      staffs: [],
      //当前的页码
      current: 1,
      //每页的条数
      pageSize: 5,
      //总条数
      total: 0,
      /*控制添加页面显示和隐藏*/
      dialogFormVisible: false,
      /*控制编辑页面显示和隐藏*/
      dialogFormVisible2: false,
      /*修改*/
      editForm: {},
      staffvo:{
        staffId:"",
        staffName:"",
      },
      dep:[],
    },
    created() {
      this.loadTable();
      this.loadDept();
    },
    methods: {
      loadDept() {
        axios.get("/dept/selectDepts").then(res => {
          this.dep = res.data.data;
        })
      },
      // 刷新
      shuaxin() {
        this.staffvo.staffName = ''
        this.staffvo.staffId = null
        this.loadTable()
      },
      handleEdit(row) {
        // 在这里实现编辑员工信息的逻辑
        this.dialogFormVisible2 = true;
        this.editForm = row;
      },
      search() {
        this.current = 1;
        this.loadTable()
        this.staffvo.staffId = ""
        this.staffvo.staffName = ""


      },
      //初始化员工表格数据
      loadTable() {
        axios.post("/expenditure/select/" + this.current + "/" + this.pageSize, this.staffvo).then(result => {
          this.staffs = result.data.data.list;
          this.total = result.data.data.total;
          console.log("==============loadTable()===============")
          console.log(result)
          console.log(this.staffs)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadTable();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.loadTable();
      },
      //删除
      deleterole(row) {
        console.log(row);
        axios.post("/expenditure/delete/" + row.deptId)
                .then(result => {
                  // 删除成功后重新加载表格数据
                  this.loadTable();
                  this.$message.success('删除成功');
                })
                .catch(error => {
                  console.error('删除失败', error);
                  this.$message.error('删除失败');
                });
      },
    }
    })

</script>
</html>

